<template>
  <div class='home-container'>
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
    >
      <van-button
        to="/search"
        slot="title"
        icon="search"
        type="info"
        round
      >
        搜索
      </van-button>
    </van-nav-bar>
    <!-- / 导航栏 -->

    <!-- 用户频道列表 -->
    <van-tabs v-model="active" class="channel-tabs">
      <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.name"
      >
        <!-- 用户频道列表内容 -->
        <!-- tab 标签页组件有一功能:只有在第一次查看标签页的时候才会渲染页面里的内容 -->
        <channel-list
          :channel="channel"
        />
        <!-- /用户频道列表内容 -->
      </van-tab>
      <div
        slot="nav-right"
        class="wap-nav"
        @click="isChnnelPopupShow = true"
      >
        <van-icon
         name="wap-nav"
        />
      </div>
    </van-tabs>
    <!-- /用户频道列表 -->

  <!-- 频道编辑弹出层 -->
    <van-popup
      v-model="isChnnelPopupShow"
      get-container="body"
      closeable
      position="bottom"
      style="height:100%"
    >
      <!-- 模板中 $event 表示事件参数 -->
      <channel-edit
        :userChannels="channels"
        :active="active"
        @closePopup="isChnnelPopupShow = false"
        @updateActive="active = $event"
      />
    </van-popup>
  <!-- /频道编辑弹出层 -->
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user.js'
import channelList from './components/channel-list'
import channelEdit from './components/channel-edit'
import { mapState } from 'vuex'
import { getStorage } from '@/utils/storage'

export default {
  name: 'HomeIndex',
  components: {
    channelList,
    channelEdit
  },
  data () {
    return {
      active: 0, // 控制被激活的标签（根据索引）
      channels: [],
      isChnnelPopupShow: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.getUserChannel()
  },
  methods: {
    async getUserChannel () {
      let channels = []
      if (this.user) {
        // 已登录，则请求获取线上的用户频道
        const { data } = await getUserChannels()
        channels = data.data.channels
      } else {
        // 未登录，如果本地有数据，则获取本地数据
        const localChannel = getStorage('localStorateUserChannels')
        if (localChannel) {
          channels = localChannel
        } else {
        // 未登录，如果本地没有数据，则获取推荐频道
          const { data } = await getUserChannels()
          channels = data.data.channels
        }
      }
      this.channels = channels
    }
  }
}
</script>
<style lang='less' scoped>
.home-container {
  /deep/ .van-nav-bar__title {
    max-width: none;
  }
  .van-button--info {
    background-color: #5babfb;
    height: 32px;
    width: 277px;
    border: none;
    .van-icon-search {
      font-size: 16px;
    }
    .van-button__text {
      font-size: 14px;
    }
  }
  .channel-tabs {
    /deep/ .van-tab {
      min-width: 100px;
      border-right: 1px solid #f3f3f3;
      border-bottom: 1px solid #f3f3f3;
    }
    /deep/ .van-tabs__line {
      bottom: 20px;
      width: 15px !important;
      height: 3px;
      background-color: #3296fa;
    }
    .wap-nav {
      position: fixed;
      right: 0;
      width: 35px;
      height: 44px;
      background-color: #ffffff;
      opacity: 0.8;
      display: flex;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #000;
      border-image: linear-gradient(#fff, #F3F3F3, #fff) 5 210;
      .van-icon-wap-nav {
        font-size: 24px;
        color: #3d3d3d;
      }
    }
  }
}
</style>
